<template>
  <el-card class="box-card">
    <el-row>
      <el-form ref="searchRef" :model="searchForm">
        <el-col :span="6" class="searchBox">
          <span class="searchText">{{ headerinfo.id }}</span>
          <el-input v-model="searchForm.Id" type="text" class="searchIpt" placeholder="请输入" />
        </el-col>
        <el-col :span="6" class="searchBox">
          <span class="searchText">{{ headerinfo.name }}</span>
          <el-input v-model="searchForm.Uname" type="text" class="searchIpt" placeholder="请输入" />
        </el-col>
        <el-col :span="6" style="margin-top: -10px; padding-right: 30px;">
          <p style="font-size: 12px;">{{ headerinfo.type }}</p>
          <el-select v-model="searchForm.State" style="width: 100%;" placeholder="请选择">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6" style="text-align: right;">
          <el-button class="titBtn" type="primary" round @click="$emit('search')">搜索</el-button>
          <el-button class="titBtn" type="primary" round @click="$emit('reset')">重置</el-button>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
export default {
  props: {
    // 标签信息
    headerinfo: {
      type: Object,
      default: () => {}
    },
    // 搜索信息
    searchForm: {
      type: Object,
      default: () => {}
    },
    // 获取状态
    status: {
      type: Array,
      default: () => {}
    }
  }
}
</script>

<style scoped lang="scss">
//顶部卡片内容
.box-card {
    margin: 20px 30px;
    border-radius: 10px;
    height: 127px;

    .searchBox{
    padding-right: 35px;
      .searchText{
      font-size: 12px;
      }
      .searchIpt{
        margin-top: 10px;
        border-radius: 5px;
      }
    }
    .titBtn{
      margin-top: 26px;
      margin-right: 10px;
      color: #312929;
      &:last-child{
        background-color: #f7f5f5;
        border: 1px solid #f7f5f5;
        &:hover{
          background-color: #f4b53f;
        }
      }
      &:first-child{
        background-color: #f4b53f;
        &:hover{
          background-color: #f09436;
        }
      }
    }
  }

</style>
